import { Button, Card, Form, Input, Table } from "antd";
import React, { useEffect, useState } from "react";
import type { hosSetListType } from "@api/hospitalSet";
import { reqHospitalSetList } from "@api/hospitalSet";
import {
  SearchOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import styles from "./index.module.less";
import { log } from "console";
import { set } from "nprogress";
function HospitalSet() {
  const [current, setCurrent] = useState(1);
  //数据2:数据总数
  const [total, setTotal] = useState(0);
  const [pageSize, setPageSize] = useState(3);
  const [hospitalList, setHospitalList] = useState<hosSetListType>([]);
  // 初始化数据
  //封装请求医院
interface getHospitalListParamsType {
    hosname?:string;hoscode?:string
}
  const getHospitalList = async ({hosname,hoscode}:getHospitalListParamsType) => {
    const result = await reqHospitalSetList({ page: current, limit: pageSize,hosname,hoscode });
    console.log(result);
    // 列表
    setHospitalList(result.records);
    // 总条数
    setTotal(result.total);
  };

  useEffect(() => {
    getHospitalList({});
  }, []);
  //查询数据回调函数
  const searchFinish = (value: any) => {
    console.log(value);
    getHospitalList(value);
  };
  const columns = [
    {
      title: "序号",
      render(_: any, __: any, index: number) {
        return index + 1;
      },
    },
    {
      title: "医院名称",
      dataIndex: "hosname",
    },
    {
      title: "医院编号",
      dataIndex: "hoscode",
    },
    {
      title: "api基础路径",
      dataIndex: "apiUrl",
    },
    {
      title: "签名",
      dataIndex: "signKey",
    },
    {
      title: "联系人姓名",
      dataIndex: "contactsName",
    },
    {
      title: "联系人手机",
      dataIndex: "contactsPhone",
    },
    {
      title: "操作",
      width: "120px",
      fixed: "right" as "right",
      render() {
        return (
          <div>
            <Button
              icon={<EditOutlined />}
              type="primary"
              className={styles.mr}
            ></Button>
            <Button icon={<DeleteOutlined />} type="primary" danger></Button>
          </div>
        );
      },
    },
  ];
  return (
    <div>
      <Card>
        <Form
          name="horizontal_login"
          layout="inline"
          className={styles.mb}
          onFinish={searchFinish}
        >
          <Form.Item name="hosname">
            <Input placeholder="医院名称" />
          </Form.Item>
          <Form.Item name="hoscode">
            <Input placeholder="医院编号" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
              查询
            </Button>
          </Form.Item>
          <Form.Item>
            <Button>清空</Button>
          </Form.Item>
        </Form>
        <div className={styles.mb}>
          <Button type="primary" className={styles.mr}>
            添加
          </Button>
          <Button type="primary" danger disabled>
            批量删除
          </Button>
        </div>
        <Table
          dataSource={hospitalList}
          columns={columns}
          bordered
          rowSelection={{}}
          scroll={{ x: 1200 }}
          pagination={{
            total: total,
            //当前页码
            current: current,
            pageSize: 3,
            showSizeChanger: true,
            //pageSize选择器的选项
            pageSizeOptions: [3, 5, 7, 10],
          }}
        />
      </Card>
    </div>
  );
}

export default HospitalSet;
